<template>
  <div />
</template>

<script>
export default {
  // 可通过inject属性注入以下工具
  // inject: ['getMoment', 'getEcharts']
  props: ['module'],
  data() {
    return {
      areaCode: '3308',
      prefix: 'https://qzcl.qz.gov.cn:8080',
      token: '398F61462A2F619B58B6AFD013E1B0E67D47970DE136D07DB7F54874C846F68E',
      data1: [
        { value: 2, name: '市本级', precent: '6.6' },
        { value: 4, name: '柯城区', precent: '13.3' },
        { value: 3, name: '衢江区', precent: '10.0' },
        { value: 6, name: '龙游县', precent: '20.0' },
        { value: 5, name: '江山市', precent: '16.7' },
        { value: 5, name: '常山县', precent: '16.7' },
        { value: 5, name: '开化县', precent: '16.7' }
      ],
      total: 30,
      box3PieChart1: null,
      timerPie1: null,
      timerPieIndex1: 0
    }
  },
  created() {

  },
  mounted() {
    this.init()
  },
  methods: {
    // 外部组件联动当前自定义组件时，触发该方法
    updateCustomModule() {

      // 自定义组件触发其他组件时，调用this.moduleInteraction(params, type)方法，其中：
      // params为可传递自定义参数給外部组件，
      // type为 'click'、'trigger'或'rightClick'（交互设置中需要先开启）
    },
    init() {
      var colorList = ['#7CC9FA', '#50F9E6', '#2092F8', '#FFE588', '#FF615A', '#C5E3FF', '#985AFF']
      const myChart = this.$echarts.init(document.getElementById('cont2'))
      const option = {
        tooltip: {
          show: true
        },
        title: {
          text: this.total,
          subtext: '总数量',
          x: '22.5%',
          y: '39%',
          textAlign: 'center',
          textStyle: {
            fontSize: 22,
            fontWeight: 'normal',
            color: '#50F9E6',
            fontFamily: 'D-Alt-Bold'
          },
          subtextStyle: {
            color: '#E0EEFF',
            fontSize: 16,
            fontWeight: 300,
            fontFamily: 'Alibaba-P-Regular'
          }
        },
        legend: {
          orient: 'horizontal',
          left: '47%',
          top: 'center',
          textStyle: {
            color: '#fff',
            fontSize: 14,
            rich: {
              a: {
                fontSize: 14,
                width: 80,
                color: '#E0EEFF',
                fontWeight: 300,
                fontFamily: 'Alibaba-P-Regular'
              },
              b: {
                fontSize: 14,
                width: 60
              },
              c: {
                fontSize: 14,
                color: '#50F9E6',
                fontFamily: 'D-Alt-Bold'
              }

            }
          },
          padding: [7, 15],
          // 图例标记的图形高度
          itemHeight: 6,
          // 图例标记的图形宽度
          itemWidth: 6,
          itemGap: 20,
          icon: 'rect',
          // backgroundColor: "linear-gradient( to top,red,green,yellow)",
          // borderRadius: 20,
          formatter: (name) => {
            const item = this.data1.filter((item) => item.name === name)[0]
            return `{a|${name}}{b|${item.precent}%}{c|${item.value}}`
          }

        },
        series: [
          {
            reverse: true,
            type: 'pie',
            center: ['23.5%', '48.5%'],
            radius: ['47%', '61%'],
            // startAngle:-200,
            avoidLabelOverlap: false,
            label: {
              show: false,
              color: '#fff',
              position: 'inside',
              formatter: (value) => {
                return value.percent + '%'
              }
            },
            itemStyle: {
              normal: {
                color: function(params) {
                  return colorList[params.dataIndex]
                },
                borderWidth: 3,
                borderColor: 'rgba(11, 27, 43)'
              }
            },
            labelLine: {
              show: false
            },
            data: this.data1
          }
        ]
      }
      myChart.setOption(option)
      this.box3PieChart1 = myChart
      this.autoPlay1(this.data1.length - 1)
    },
    autoPlay1(length) {
      if (this.timerPie1) {
        clearInterval(this.timerPie1)
        this.timerPie1 = null
      }
      this.timerPie1 = setInterval(() => {
        let index = 0
        let index2 = 0

        if (this.timerPieIndex1 > length) {
          this.timerPieIndex1 = 0
          index = 0
          index2 = length
        } else {
          index = this.timerPieIndex1
          index2 = index - 1
        }
        this.timerPieIndex1++
        this.box3PieChart1.dispatchAction({
          type: 'highlight',
          seriesIndex: 1,
          dataIndex: index
        })
        this.box3PieChart1.dispatchAction({
          type: 'showTip',
          seriesIndex: 1,
          dataIndex: index,
          position: 'right'
        })

        this.box3PieChart1.dispatchAction({
          type: 'downplay',
          seriesIndex: 1,
          dataIndex: index2
        })
      }, 2000)
    }
    // 其中：boardId 目标大屏id
  }
}
</script>

<style scoped>

</style>
